<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
<link type="text/css" rel="stylesheet"
	href="easyui/themes/black/easyui.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<style>
	
#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;margin:0; padding:0;}
#playBox .oUlplay li{ float:left;}
#playBox .pre{ cursor:pointer; width:45px; height:45px;  position:absolute; top:190px; left:10px; z-index:10;}
#playBox .next{ cursor:pointer; width:45px; height:45px;  position:absolute; top:190px; right:10px; z-index:10;}
#playBox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
#playBox .smalltitle .thistitle{ background:#69aaec;}
#playBox img{
	width:1000px;
	height:409px;}
</style>

</head>
<body style=" background-color: #8F8772">
<!--头部-->
	<div style="width: 100%;height: 20px;background-color:white;">
		<div style="float: left; margin-left: 10px"><span>1428416978</span></div>
		<div  style="float: right;margin-right: 10px"><span><a href="jump?jump_id=1" style=" color:#000000;">登录</a></span></div>
		<div  style="float: right;margin-right: 10px"><span><a href="jump?jump_id=2" style=" color:#000000;">注册</a></span></div>
	</div>
<!--身体-->
	<div>
		<div style="width: 100%; margin-top: 0px">
		<img alt="" src="img/qingming.jpg" style="width: 100%;height: 50px">
		</div>
		<!--模糊查询-->
		<div style="text-align: center;margin-top: 20px;">
				<input name="cname" class="easyui-searchbox" data-options="prompt:'',searcher:" style="width:600px;height: 40px;font-size: 40dp">
				<button style="width: 150px;height: 50px">搜索</button>
		</div>
		<!--二级菜单导航栏-->
		<div style="width: 100%;height: 40px;background-color: black;text-align: center;">
			<ul style="color: white;list-style: none;" >
				<li style="float: right;font: 40px;margin: 10px"><B>食品</B></li>
				<li style="float: right;font: 40px;margin: 10px"><B>手机</B></li>
				<li style="float: right;font: 40px;margin: 10px"><B>电脑</B></li>
				<li style="float: right;font: 40px;margin: 10px"><B>服装</B></li>
				<li style="float: right;font: 40px;margin: 10px"><B>日常用品</B></li>
			</ul>
		</div>
		<!--滚浮-->
	<div id="playBox" style="width: 80%;height:300px;">
    <div class="pre"></div>
    <div class="next"></div>
    <div class="smalltitle">
				<ul>
					<li class="thistitle"></li>
					<li ></li>
					<li></li>
				</ul>
			</div>
    <ul class="oUlplay">
       <li><a href="" target="_blank"><img style="width: 100%" src="img/3303349658_cfaebb811f_o.jpg"/></a></li>
       <li><a href="" target="_blank"><img src="img/Street-Fashion.jpg"/></a></li>
    </ul>
  </div>
  <!--少数商品展示-->
  	<div style="width: 100%;height:auto;text-align:center;">
  		<div style="width: 30%;height: 300px;float: left; text-align: center;background-color: red;">
			<span style="font-size: 30dp">
				<a href="">查询出该类型的所有商品</a>
			</span>
  		</div>
  	</div>
<!--尾部-->
<div style="width: 100%;height: auto ;background-color: white;text-align: center;">
	<div style="width: 90%;height: auto ;">
		<div style="width: 25%;height: auto;text-align: center;float: left;">
			<h5>购物指南</h5>
			<ul style="list-style: none;align-items: center;">
				<li>购物流程</li>
				<li>会员介绍</li>
				<li>将见问题</li>
				<li>生活旅行</li>
				<li>联系客服</li>
			</ul>
		</div>
		<div style="width: 25%;height: auto;text-align: center;float: left;">
			<h5>配送方式</h5>
			<ul style="list-style: none;align-items: center;">
				<li>上门自提</li>
				<li>211限时送</li>
				<li>配送时间查询</li>
				<li>配送收费标准</li>
				<li>海外配送</li>
			</ul>
		</div>
		<div style="width: 25%;height: auto;text-align: center;float: left;">
			<h5>支付方式</h5>
			<ul style="list-style: none;">
				<li>支付宝支付</li>
				<li>微信支付</li>
				<li>银联卡支付</li>
				<li>货到付款</li>
				<li>不支持QQ钱包</li>
			</ul>
		</div>
		<div style="width: 25%;height: auto;text-align: center;float: left;">
			<h5>售后服务</h5>			
			<ul style="list-style: none;">
				<li>售后政策</li>
				<li>财产保护</li>
				<li>退款说明</li>
				<li>返修/退还订单</li>
				<li>取消订单</li>
			</ul>
		</div>
	</div>
</div>
	<div style="clear: both;margin:10px auto; text-align:center;  padding:10px 0;">
		<a href="#" rel="nofollow" style=" color:#666;">关于我们</a>|<a href="#" rel="nofollow" style=" color:#666;">广告服务</a style=" color:#666;">|<a href="#" rel="nofollow" style=" color:#666;">联系我们</a>
    |<a href="#" rel="nofollow" style=" color:#666;">法律声明</a>|<a href="#" rel="nofollow" style=" color:#666;">网站地图</a>|<a href="#" rel="nofollow" style=" color:#666;">版权声明</a>
    |<a href="#" rel="nofollow" style=" color:#666;">帮助中心</a style=" color:#666;"><br />版权所有&copy;2018-2030&nbsp;豫ICP备88888888号
		<div style="width: 100%;height: 40px;background-color: gray; text-align: center;">
		<span>------------------------------------------------------------------------------<b>我是有底线的</b>------------------------------------------------------------------------------</span>
		</div>
	</div>
</body>
<!--输入框的函数-->
<script type="text/javascript">
// 	function doSearch(value) {
// 		url:findcommodity?cname=""+value;
// 	}
	/*浮动框的开头*/
	function getStyle(obj,name)
	{
		if(obj.currentStyle)
		{
			return obj.currentStyle[name]
		}
		else
		{
			return getComputedStyle(obj,false)[name]
		}
	}

	function getByClass(oParent,nClass)
	{
		var eLe = oParent.getElementsByTagName('*');
		var aRrent  = [];
		for(var i=0; i<eLe.length; i++)
		{
			if(eLe[i].className == nClass)
			{
				aRrent.push(eLe[i]);
			}
		}
		return aRrent;
	}

	function startMove(obj,att,add)
	{
		clearInterval(obj.timer)
		obj.timer = setInterval(function(){
		   var cutt = 0 ;
		   if(att=='opacity')
		   {
			   cutt = Math.round(parseFloat(getStyle(obj,att)));
		   }
		   else
		   {
			   cutt = Math.round(parseInt(getStyle(obj,att)));
		   }
		   var speed = (add-cutt)/4;
		   speed = speed>0?Math.ceil(speed):Math.floor(speed);
		   if(cutt==add)
		   {
			   clearInterval(obj.timer)
		   }
		   else
		   {
			   if(att=='opacity')
			   {
				   obj.style.opacity = (cutt+speed)/100;
				   obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')';
			   }
			   else
			   {
				   obj.style[att] = cutt+speed+'px';
			   }
		   }
		   
		},30)
	}

	  window.onload = function()
	  {
		  var oDiv = document.getElementById('playBox');
		  var oPre = getByClass(oDiv,'pre')[0];
		  var oNext = getByClass(oDiv,'next')[0];
		  var oUlBig = getByClass(oDiv,'oUlplay')[0];
		  var aBigLi = oUlBig.getElementsByTagName('li');
		  var oDivSmall = getByClass(oDiv,'smalltitle')[0]
		  var aLiSmall = oDivSmall.getElementsByTagName('li');
		  
		  function tab()
		  {
		     for(var i=0; i<aLiSmall.length; i++)
		     {
			    aLiSmall[i].className = '';
		     }
		     aLiSmall[now].className = 'thistitle'
		     startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth))
		  }
		  var now = 0;
		  for(var i=0; i<aLiSmall.length; i++)
		  {
			  aLiSmall[i].index = i;
			  aLiSmall[i].onclick = function()
			  {
				  now = this.index;
				  tab();
			  }
		 }
		  oPre.onclick = function()
		  {
			  now--
			  if(now ==-1)
			  {
				  now = aBigLi.length;
			  }
			   tab();
		  }
		   oNext.onclick = function()
		  {
			   now++
			  if(now ==aBigLi.length)
			  {
				  now = 0;
			  }
			  tab();
		  }
		  var timer = setInterval(oNext.onclick,1000) //�������ʱ������
		  oDiv.onmouseover = function()
		  {
			  clearInterval(timer)
		  }
		   oDiv.onmouseout = function()
		  {
			  timer = setInterval(oNext.onclick,1000) //�������ʱ������
		  }
	  }
	  /*浮动框的结尾*/
</script>
</html>